<template>
  <section class="header-wrap">
    <section class="header-wrap__content">
      <section class="left-rect">
        <img src="../../../../public/n73222fs2_1712370854021_sudkhhrzbid.svg">
      </section>
      <section class="right-rect">
        <img src="../../../../public/9t05765bdi_1712370880048_hyovs9cein.svg">
      </section>
      <!--   视频背景   -->
      <section class="title-wrap">
        <h1 class="title">
          <span class="title-text">平台赋能 鳝链未来</span>
        </h1>
      </section>
    </section>
  </section>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue';

import { formatDate } from '@/utils/index';

type Interval = number | null

const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

let timer: Interval = null;
const dateYear = ref(formatDate(new Date(), 'YYYY-MM-DD'));
const dateDay = ref(formatDate(new Date(), 'HH:mm:ss'));
const week = ref(weekday[new Date().getDay()]);
const timeFn = () => {
  timer = window.setInterval(() => {
    dateYear.value = formatDate(new Date(), 'YYYY-MM-DD');
    dateDay.value = formatDate(new Date(), 'HH:mm:ss');
  }, 1000);
};
timeFn();

onBeforeUnmount(() => {
  if (timer) {
    window.clearInterval(timer);
  }
});
</script>

<style lang="scss" scoped>

.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  //var(--maia-small-space)
  padding:0  var(--maia-small-space) 0;
  margin-bottom: 4px;

  .header-wrap__content {
    position: relative;
    z-index: 99;
    width: 100%;
    height: var(--maia-nav-header-height);
    background-image: url('../../../../public/d4qwwlol5_1712371173465_eeyj2n2jzs.svg');
    filter: brightness(120%) contrast(152%) hue-rotate(35deg) saturate(169%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    @include flex-box(center);

    .videoBg {
      width: 100%;
      height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .light {
      position: absolute;
      bottom: -26px;
      width: 100%;
      height: 56px;
      background-image: url('../../../assets/images/headers/light.png');
      background-position: 80px center;
    }

    .left-rect,
    .right-rect {
      position: absolute;
      top: 0;
      width: 132px;
      height: 74px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .left-rect {
      left: 0;
    }

    .right-rect {
      right: 0;

    }

    .title-wrap {
      .title {
        position: relative;

        color: #fff;
        text-align: center;
        background-size: cover;

        .title-text {
          font-size: 45px;
          font-weight: normal;
          letter-spacing: 2px;
          font-family: 'youshe';
          line-height: 48px;
        }
      }
    }
  }
}

.timers {
  position: absolute;
  top: 30px;
  right: 0;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.menu-wrap {
  position: absolute;
  top: 30px;
  left: 0;
  display: flex;
  align-items: center;
  font-size: 18px;
}
</style>
